import React, { useRef, useCallback, useEffect, memo, Component } from "react";
import { Row, Col, Button, Icon } from "antd";
import moment from "moment";
import echarts from "echarts";
import Echarts from "echarts-for-react";
import ReactSeamlessScroll from "react-seamless-scroll";
import * as KanBan3Service from "../../axios/KanBan3_api";
import FullScreen from '@/components/FullScreen';
import styles from "./index.module.scss";
import { openModalMessage } from "@/components/TableCustomize";
const weekDays = [
  "星期天",
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
];
function getDateStr() {
  let date = new Date();
  let YYMMDD = moment(date).format("YYYY 年 MM 月 DD 日");
  let HHmmss = moment(date).format("HH:mm:ss");
  let weekDay = weekDays[date.getDay()];
  return (
    <div>
      {YYMMDD}&emsp;{HHmmss}&emsp;{weekDay}
    </div>
  );
}

// 滚动
function useBoxScroll(outerEl, contentEl) {
  const timerRef = useRef();

  const doScroll = useCallback(() => {
    if (outerEl == null || contentEl == null) {
      return;
    }
    if (outerEl.scrollTop >= contentEl.offsetHeight - outerEl.clientHeight) {
      outerEl.scrollTop = 0;
    } else {
      outerEl.scrollTop += 1;
    }
  }, [contentEl, outerEl]);

  const stop = useCallback(() => {
    clearInterval(timerRef.current);
  }, []);

  const start = useCallback(() => {
    timerRef.current = setInterval(doScroll, 100);
  }, [doScroll]);

  useEffect(() => {
    start();
    return () => stop();
  }, [start, stop]);

  return { start, stop };
}

// 表格
const Table1 = memo(function Table1({ data }) {
  const outerEl = useRef();
  const contentEl = useRef();
  const { start, stop } = useBoxScroll(outerEl.current, contentEl.current);

  return (
    <div className={styles.warnInfo}>
      <div className={styles.theader}>
        <div style={{ width: "13%" }}>批号</div>
        <div style={{ width: "13%" }}>机型</div>
        <div style={{ width: "13%" }}>工序名称</div>
        <div style={{ width: "13%" }}>班组名称</div>
        <div style={{ width: "13%" }}>班组长</div>
        <div style={{ width: "7%" }}>领料进度</div>
        <div style={{ width: "7%" }}>发料进度</div>
        <div style={{ width: "7%" }}>收料进度</div>
        <div style={{ width: "7%" }}>物料状态</div>
        <div style={{ width: "7%" }}>装配状态</div>
      </div>
      <ReactSeamlessScroll style={{ width: "100%", height: "32vh" }}>
        <div
          className={styles.bodyHeight}
          ref={outerEl}
          style={{ height: "32vh", overflow: "hidden" }}
          onMouseEnter={stop}
          onMouseLeave={start}
        >
          <div className={styles.scrollBody} ref={contentEl}>
            {Array.isArray(data) && data.length > 0 ? (
              data.map((val, index) => {
                return (
                  <li
                    key={index}
                    className={styles.theader}
                    style={{ fontWeight: "normal", paddingLeft: 0 }}
                  >
                    <div style={{ color: "#7FAFFF", width: "13%" }}>{index}</div>
                    <div style={{ color: "#7FAFFF", width: "13%" }}>{index}</div>
                    <div style={{ color: "#7FAFFF", width: "13%" }}>{index}</div>
                    <div style={{ color: "#7FAFFF", width: "13%" }}>{index}</div>
                    <div style={{ color: "#7FAFFF", width: "13%" }}>{index}</div>
                    <div style={{ color: "#7FAFFF", width: "7%" }}>{index}</div>
                    <div style={{ color: "#7FAFFF", width: "7%" }}>{index}</div>
                    <div style={{ color: "#7FAFFF", width: "7%" }}>{index}</div>
                    <div style={{ color: "#7FAFFF", width: "7%" }}>{index}</div>
                    <div style={{ color: "#7FAFFF", width: "7%" }}>{index}</div>
                  </li>
                );
              })
            ) : (
              <li
                style={{
                  height: "100%",
                  width: "100%",
                  display: "flex",
                  justifyContent: "center",
                  alignItems: "center",
                  color: "#fff",
                }}
              >
                <div style={{ fontWeight: 600, padding: 20 }}>暂无数据</div>
              </li>
            )}
          </div>
        </div>
      </ReactSeamlessScroll>
    </div>
  );
});

class KanBan extends Component {
  state = {
    times: getDateStr(),
    dataSource: [],
    selectedRows: [],
    tableData: [],
    tabKey: '1',
    stateList:[
      {value:1,title:'已派工'},
      {value:2,title:'已开工'},
      {value:3,title:'已报工'},
    ]
  };
  async componentDidMount() {
    await this.getDataList();
    // this.timer = setInterval(async () => {
    //   this.getDataList();
    // }, 60000);
    this.timer2 = setInterval(async () => {
      this.setState({
        times: getDateStr()
      });
    }, 1000);
  }
  componentWillUnmount() {
    // this.timer && clearInterval(this.timer)
    this.timer2 && clearInterval(this.timer2)
  }
  /**
   * 列表
   */
  getDataList = () => {
    KanBan3Service.querySeat({ pageNum: 1, pageSize: 100 }).then((res) => {
      if (res.data.code == 200) {
        let dataSource = res?.data?.data.map((item) => { return item.code })

        KanBan3Service.seatDetails(dataSource).then((res) => {
          if (res.data.code == 200) {
            console.log(res?.data?.data);
            let tableData = res?.data?.data || [];
            this.setState({ tableData })
          }
        });
      }
    });

    
  };

  handleCheckBox = (item, index) => {
    let dataSource = this.state.dataSource
    let selectedRows = this.state.selectedRows

    dataSource.splice(index, 1, { ...item, checked: !item.checked })
    if (!item.checked) {
      selectedRows.push({ ...item, checked: !item.checked })
    } else {
      let i = selectedRows.filter(it => it.id == item.id)
      selectedRows.splice(i, 1)
    }
    this.setState({ dataSource, selectedRows })
  }


  // 确定
  handleSubmit = () => {
    const { selectedRows } = this.state;
    if (selectedRows.length == 0) {
      return openModalMessage('warning', '至少选择 1 个机位！')
    }
    if (selectedRows.length > 4) {
      return openModalMessage('warning', '最多选择 4 个机位！')
    }
    let arr = []
    selectedRows.map(item => arr.push(item.code))
    console.log(arr, 'arr');
    KanBan3Service.seatDetails(arr).then((res) => {
      if (res.data.code == 200) {
        let tableData = res?.data?.data || [];
        this.setState({ tabKey: '2', tableData })
      }
    });

    // this.setState({
    //   tabKey: '2',
    //   tableData: new Array(selectedRows.length).fill({
    //     "seat": "三菱龙门 MVR30(CNC)",
    //     "batchNo": "C520673/1",
    //     "model": "DCC400",
    //     "procedureCode": "0020",
    //     "procedureName": "发（下）料",
    //     "groupName": "电气部边4组",
    //     "groupCode": "DQBB01",
    //     "groupLeader": "熊根华",
    //     "receiveMaterialProcess": "0.00%",
    //     "getMaterialProcess": "100.00%",
    //     "distributeMaterialProcess": "0.00%",
    //     "materialStatus": 0,
    //     "isStates": 2
    //   })
    // })

  }
  // 清空
  handleClear = () => {
    let dataSource = this.state.dataSource
    dataSource.map(item => {
      item.checked = false
      return item
    })
    this.setState({ dataSource, selectedRows: [] })
  }
  // 返回
  handleBack = () => {
    this.handleClear()
    this.setState({ tabKey: '1' })
  }
  render() {
    const { times, dataSource, tableData, tabKey,stateList } = this.state;
    return (
      <>
      <div className={styles.bg} style={{ backgroundImage: `url(${require('@/assets/img/bg.png')})`}}>
        <div className={styles.fill_parent} 
        >
          <div className={styles.head} style={{ backgroundImage: `url(${require('@/assets/img/head-bg.png')})`}}>
            <div className={styles.title}><label>MES机位看板</label></div>
          </div>
          <div className={styles.div}>
            <div className={styles.content}>
              <div className={`${styles.layout} ${styles.layout_left_top}`}>
                <div className={styles.panel}>
                  <div className={styles.title}><label>{tableData[0]?.seat}</label></div>
                  {!!tableData[0] ?  <div className={styles.chart} dg-chart-widget="">
                    <div>批号：{tableData[0]?.batchNo}
                     </div>
                    <div>装配班组：{tableData[0]?.groupCode}
                      </div>
                    <div>领料进度：{tableData[0]?.getMaterialProcess}
                     </div>
                    <div>收料进度：{tableData[0]?.receiveMaterialProcess}
                      </div>
                    <div>装配状态：{stateList.filter((item)=>item.value==tableData[0]?.isStates)?.[0]?.title}
                      </div>
                    <div>
                      工序名称：{tableData[0]?.procedureName}
                      
                    </div>
                    <div>
                      班组名称：{tableData[0]?.groupName}
                      
                    </div><div>
                      班组长：{tableData[0]?.groupLeader}
                      
                    </div><div>
                      发料进度：{tableData[0]?.distributeMaterialProcess}
                      
                    </div><div>
                      物料状态：{tableData[0]?.materialStatus == 0 ? '正常' : tableData[0]?.materialStatus == 1?'欠料':'' }
                      
                    </div><div>
                      机型：{tableData[0]?.model}
                      
                    </div><div>
                      工序编码：{tableData[0]?.procedureCode}
                    </div>
                  </div>:<div className={styles.chart} dg-chart-widget=""></div>}
                </div>
              </div>
              <div className={`${styles.layout} ${styles.layout_center_top}`}>
                <div className={styles.panel}>
                  <div className={styles.title}><label>{tableData[1]?.seat}</label></div>
                  {!!tableData[1] ?   <div className={styles.chart} dg-chart-widget="">
                    <div>批号：{tableData[1]?.batchNo}
                     </div>
                    <div>装配班组：{tableData[1]?.groupCode}
                      </div>
                    <div>领料进度：{tableData[1]?.getMaterialProcess}
                     </div>
                    <div>收料进度：{tableData[1]?.receiveMaterialProcess}
                      </div>
                    <div>装配状态：{stateList.filter((item)=>item.value==tableData[1]?.isStates)[0]?.title}
                      </div>
                    <div>
                      工序名称：{tableData[1]?.procedureName}
                      
                    </div>
                    <div>
                      班组名称：{tableData[1]?.groupName}
                      
                    </div><div>
                      班组长：{tableData[1]?.groupLeader}
                      
                    </div><div>
                      发料进度：{tableData[1]?.distributeMaterialProcess}
                      
                    </div><div>
                      物料状态：{tableData[1]?.materialStatus == 0 ? '正常' : tableData[1]?.materialStatus == 1?'欠料':'' }
                      
                    </div><div>
                      机型：{tableData[1]?.model}
                      
                    </div><div>
                      工序编码：{tableData[1]?.procedureCode}
                    </div>
                  </div>:<div className={styles.chart} dg-chart-widget=""></div>}
                </div>
              </div>
              <div className={`${styles.layout} ${styles.layout_right_top}`}>
                <div className={styles.panel}>
                  <div className={styles.title}><label>{tableData[2]?.seat}</label></div>
                  {!!tableData[2] ?   <div className={styles.chart} dg-chart-widget="">
                    <div>批号：{tableData[2]?.batchNo}
                     </div>
                    <div>装配班组：{tableData[2]?.groupCode}
                      </div>
                    <div>领料进度：{tableData[2]?.getMaterialProcess}
                     </div>
                    <div>收料进度：{tableData[2]?.receiveMaterialProcess}
                      </div>
                    <div>装配状态：{stateList.filter((item)=>item.value==tableData[2]?.isStates)[0]?.title}
                      </div>
                    <div>
                      工序名称：{tableData[2]?.procedureName}
                      
                    </div>
                    <div>
                      班组名称：{tableData[2]?.groupName}
                      
                    </div><div>
                      班组长：{tableData[2]?.groupLeader}
                      
                    </div><div>
                      发料进度：{tableData[2]?.distributeMaterialProcess}
                      
                    </div><div>
                      物料状态：{tableData[2]?.materialStatus == 0 ? '正常' : tableData[2]?.materialStatus == 1?'欠料':'' }
                      
                    </div><div>
                      机型：{tableData[2]?.model}
                      
                    </div><div>
                      工序编码：{tableData[2]?.procedureCode}
                    </div>
                  </div>:<div className={styles.chart} dg-chart-widget=""></div>}
                </div>
              </div>
              <div className={`${styles.layout} ${styles.layout_right_top4}`}>
                <div className={styles.panel}>
                  <div className={styles.title}><label>{tableData[3]?.seat}</label></div>
                  {!!tableData[3] ?  <div className={styles.chart} dg-chart-widget="">
                    <div>批号：{tableData[3]?.batchNo}
                     </div>
                    <div>装配班组：{tableData[3]?.groupCode}
                      </div>
                    <div>领料进度：{tableData[3]?.getMaterialProcess}
                     </div>
                    <div>收料进度：{tableData[3]?.receiveMaterialProcess}
                      </div>
                    <div>装配状态：{stateList.filter((item)=>item.value==tableData[3]?.isStates)[0]?.title}
                      </div>
                    <div>
                      工序名称：{tableData[3]?.procedureName}
                      
                    </div>
                    <div>
                      班组名称：{tableData[3]?.groupName}
                      
                    </div><div>
                      班组长：{tableData[3]?.groupLeader}
                      
                    </div><div>
                      发料进度：{tableData[3]?.distributeMaterialProcess}
                      
                    </div><div>
                      物料状态：{tableData[3]?.materialStatus == 0 ? '正常' : tableData[3]?.materialStatus == 1?'欠料':'' }
                      
                    </div><div>
                      机型：{tableData[3]?.model}
                      
                    </div><div>
                      工序编码：{tableData[3]?.procedureCode}
                    </div>
                  </div>:<div className={styles.chart} dg-chart-widget=""></div>}
                </div>
              </div>
              <div className={styles.div4}>
                <div dangerouslySetInnerHTML={{ __html: "<br />" }}>
                </div>
                <div dangerouslySetInnerHTML={{ __html: "<br />" }}>
                </div>
                <div dangerouslySetInnerHTML={{ __html: "<br />" }}>
                </div>
                <div dangerouslySetInnerHTML={{ __html: "<br />" }}>
                </div>
                <span style={{ writingMode: 'tb-rl', fontSize: '40px', letterSpacing: '7.2rem' }}>
                  平车轨道
                </span>
              </div>
              <div className={`${styles.layout} ${styles.layout_right_top5}`}>
                <div className={styles.panel}>
                  <div className={styles.title}><label>{tableData[4]?.seat}</label></div>
                  {!!tableData[4] ?  <div className={styles.chart} dg-chart-widget="">
                    <div>批号：{tableData[4]?.batchNo}
                     </div>
                    <div>装配班组：{tableData[4]?.groupCode}
                      </div>
                    <div>领料进度：{tableData[4]?.getMaterialProcess}
                     </div>
                    <div>收料进度：{tableData[4]?.receiveMaterialProcess}
                      </div>
                    <div>装配状态：{stateList.filter((item)=>item.value==tableData[4]?.isStates)[0]?.title}
                      </div>
                    <div>
                      工序名称：{tableData[4]?.procedureName}
                      
                    </div>
                    <div>
                      班组名称：{tableData[4]?.groupName}
                      
                    </div><div>
                      班组长：{tableData[4]?.groupLeader}
                      
                    </div><div>
                      发料进度：{tableData[4]?.distributeMaterialProcess}
                      
                    </div><div>
                      物料状态：{tableData[4]?.materialStatus == 0 ? '正常' : tableData[4]?.materialStatus == 1?'欠料':'' }
                      
                    </div><div>
                      机型：{tableData[4]?.model}
                      
                    </div><div>
                      工序编码：{tableData[4]?.procedureCode}
                    </div>
                  </div>:<div className={styles.chart} dg-chart-widget=""></div>}
                </div>
              </div>
              <div className={`${styles.layout} ${styles.layout_right_top6}`}>
                <div className={styles.panel}>
                  <div className={styles.title}><label>{tableData[5]?.seat}</label></div>
                  {!!tableData[5] ?  <div className={styles.chart} dg-chart-widget="">
                    <div>批号：{tableData[5]?.batchNo}
                     </div>
                    <div>装配班组：{tableData[5]?.groupCode}
                      </div>
                    <div>领料进度：{tableData[5]?.getMaterialProcess}
                     </div>
                    <div>收料进度：{tableData[5]?.receiveMaterialProcess}
                      </div>
                    <div>装配状态：{stateList.filter((item)=>item.value==tableData[5]?.isStates)[0]?.title}
                      </div>
                    <div>
                      工序名称：{tableData[5]?.procedureName}
                      
                    </div>
                    <div>
                      班组名称：{tableData[5]?.groupName}
                      
                    </div><div>
                      班组长：{tableData[5]?.groupLeader}
                      
                    </div><div>
                      发料进度：{tableData[5]?.distributeMaterialProcess}
                      
                    </div><div>
                      物料状态：{tableData[5]?.materialStatus == 0 ? '正常' : tableData[5]?.materialStatus == 1?'欠料':'' }
                      
                    </div><div>
                      机型：{tableData[5]?.model}
                      
                    </div><div>
                      工序编码：{tableData[5]?.procedureCode}
                    </div>
                  </div>:<div className={styles.chart} dg-chart-widget=""></div>}
                </div>
              </div>
              <div className={`${styles.layout} ${styles.layout_right_top7}`}>
                <div className={styles.panel}>
                  <div className={styles.title}><label>{tableData[6]?.seat}</label></div>
                  {!!tableData[6] ?    <div className={styles.chart} dg-chart-widget="">
                    <div>批号：{tableData[6]?.batchNo}
                     </div>
                    <div>装配班组：{tableData[6]?.groupCode}
                      </div>
                    <div>领料进度：{tableData[6]?.getMaterialProcess}
                     </div>
                    <div>收料进度：{tableData[6]?.receiveMaterialProcess}
                      </div>
                    <div>装配状态：{stateList.filter((item)=>item.value==tableData[6]?.isStates)[0]?.title}
                      </div>
                    <div>
                      工序名称：{tableData[6]?.procedureName}
                      
                    </div>
                    <div>
                      班组名称：{tableData[6]?.groupName}
                      
                    </div><div>
                      班组长：{tableData[6]?.groupLeader}
                      
                    </div><div>
                      发料进度：{tableData[6]?.distributeMaterialProcess}
                      
                    </div><div>
                      物料状态：{tableData[6]?.materialStatus == 0 ? '正常' : tableData[6]?.materialStatus == 1?'欠料':'' }
                      
                    </div><div>
                      机型：{tableData[6]?.model}
                      
                    </div><div>
                      工序编码：{tableData[6]?.procedureCode}
                    </div>
                  </div>:<div className={styles.chart} dg-chart-widget=""></div>}
                </div>
              </div>
              <div className={styles.div2}></div>
              <div className={`${styles.layout} ${styles.layout_left_bottom}`}>
                <div className={styles.panel}>
                  <div className={styles.title}><label>{tableData[7]?.seat}</label></div>
                  {!!tableData[7] ?   <div className={styles.chart} dg-chart-widget="">
                    <div>批号：{tableData[7]?.batchNo}
                     </div>
                    <div>装配班组：{tableData[7]?.groupCode}
                      </div>
                    <div>领料进度：{tableData[7]?.getMaterialProcess}
                     </div>
                    <div>收料进度：{tableData[7]?.receiveMaterialProcess}
                      </div>
                    <div>装配状态：{stateList.filter((item)=>item.value==tableData[7]?.isStates)[0]?.title}
                      </div>
                    <div>
                      工序名称：{tableData[7]?.procedureName}
                      
                    </div>
                    <div>
                      班组名称：{tableData[7]?.groupName}
                      
                    </div><div>
                      班组长：{tableData[7]?.groupLeader}
                      
                    </div><div>
                      发料进度：{tableData[7]?.distributeMaterialProcess}
                      
                    </div><div>
                      物料状态：{tableData[7]?.materialStatus == 0 ? '正常' : tableData[7]?.materialStatus == 1?'欠料':'' }
                      
                    </div><div>
                      机型：{tableData[7]?.model}
                      
                    </div><div>
                      工序编码：{tableData[7]?.procedureCode}
                    </div>
                  </div>:<div className={styles.chart} dg-chart-widget=""></div>}
                </div>
              </div>

              <div className={`${styles.layout} ${styles.layout_center_bottom}`}>
                <div className={styles.panel}>
                  <div className={styles.title}><label>{tableData[8]?.seat}</label></div>
                  {!!tableData[8] ?      <div className={styles.chart} dg-chart-widget="">
                    <div>批号：{tableData[8]?.batchNo}
                     </div>
                    <div>装配班组：{tableData[8]?.groupCode}
                      </div>
                    <div>领料进度：{tableData[8]?.getMaterialProcess}
                     </div>
                    <div>收料进度：{tableData[8]?.receiveMaterialProcess}
                      </div>
                    <div>装配状态：{stateList.filter((item)=>item.value==tableData[8]?.isStates)[0]?.title}
                      </div>
                    <div>
                      工序名称：{tableData[8]?.procedureName}
                      
                    </div>
                    <div>
                      班组名称：{tableData[8]?.groupName}
                      
                    </div><div>
                      班组长：{tableData[8]?.groupLeader}
                      
                    </div><div>
                      发料进度：{tableData[8]?.distributeMaterialProcess}
                      
                    </div><div>
                      物料状态：{tableData[8]?.materialStatus == 0 ? '正常' : tableData[8]?.materialStatus == 1?'欠料':'' }
                      
                    </div><div>
                      机型：{tableData[8]?.model}
                      
                    </div><div>
                      工序编码：{tableData[8]?.procedureCode}
                    </div>
                  </div>:<div className={styles.chart} dg-chart-widget=""></div>}
                </div>
              </div>
              <div className={`${styles.layout} ${styles.layout_center_bottom8}`}>
                <div className={styles.panel}>
                  <div className={styles.title}><label>{tableData[9]?.seat}</label></div>
                  {!!tableData[9] ?  <div className={styles.chart} dg-chart-widget="">
                    <div>批号：{tableData[9]?.batchNo}
                     </div>
                    <div>装配班组：{tableData[9]?.groupCode}
                      </div>
                    <div>领料进度：{tableData[9]?.getMaterialProcess}
                     </div>
                    <div>收料进度：{tableData[9]?.receiveMaterialProcess}
                      </div>
                    <div>装配状态：{stateList.filter((item)=>item.value==tableData[9]?.isStates)[0]?.title}
                      </div>
                    <div>
                      工序名称：{tableData[9]?.procedureName}
                      
                    </div>
                    <div>
                      班组名称：{tableData[9]?.groupName}
                      
                    </div><div>
                      班组长：{tableData[9]?.groupLeader}
                      
                    </div><div>
                      发料进度：{tableData[9]?.distributeMaterialProcess}
                      
                    </div><div>
                      物料状态：{tableData[9]?.materialStatus == 0 ? '正常' : tableData[9]?.materialStatus == 1?'欠料':'' }
                      
                    </div><div>
                      机型：{tableData[9]?.model}
                      
                    </div><div>
                      工序编码：{tableData[9]?.procedureCode}
                    </div>
                  </div>:<div className={styles.chart} dg-chart-widget=""></div>}
                </div>
              </div>
              <div className={`${styles.layout} ${styles.layout_center_bottom9}`}>
                <div className={styles.panel}>
                  <div className={styles.title}><label>{tableData[10]?.seat}</label></div>
                  {!!tableData[10] ?  <div className={styles.chart} dg-chart-widget="">
                    <div>批号：{tableData[10]?.batchNo}
                     </div>
                    <div>装配班组：{tableData[10]?.groupCode}
                      </div>
                    <div>领料进度：{tableData[10]?.getMaterialProcess}
                     </div>
                    <div>收料进度：{tableData[10]?.receiveMaterialProcess}
                      </div>
                    <div>装配状态：{stateList.filter((item)=>item.value==tableData[10]?.isStates)[0]?.title}
                      </div>
                    <div>
                      工序名称：{tableData[10]?.procedureName}
                      
                    </div>
                    <div>
                      班组名称：{tableData[10]?.groupName}
                      
                    </div><div>
                      班组长：{tableData[10]?.groupLeader}
                      
                    </div><div>
                      发料进度：{tableData[10]?.distributeMaterialProcess}
                      
                    </div><div>
                      物料状态：{tableData[10]?.materialStatus == 0 ? '正常' : tableData[10]?.materialStatus == 1?'欠料':'' }
                      
                    </div><div>
                      机型：{tableData[10]?.model}
                      
                    </div><div>
                      工序编码：{tableData[10]?.procedureCode}
                    </div>
                  </div>:<div className={styles.chart} dg-chart-widget=""></div>}
                </div>
              </div>

              <div className={`${styles.layout} ${styles.layout_right_bottom12}`}>
                <div className={styles.panel}>
                  <div className={styles.title}><label>{tableData[11]?.seat}</label></div>
                  {!!tableData[11] ?  <div className={styles.chart} dg-chart-widget="">
                    <div>批号：{tableData[11]?.batchNo}
                     </div>
                    <div>装配班组：{tableData[11]?.groupCode}
                      </div>
                    <div>领料进度：{tableData[11]?.getMaterialProcess}
                     </div>
                    <div>收料进度：{tableData[11]?.receiveMaterialProcess}
                      </div>
                    <div>装配状态：{stateList.filter((item)=>item.value==tableData[11]?.isStates)[0]?.title}
                      </div>
                    <div>
                      工序名称：{tableData[11]?.procedureName}
                      
                    </div>
                    <div>
                      班组名称：{tableData[11]?.groupName}
                      
                    </div><div>
                      班组长：{tableData[11]?.groupLeader}
                      
                    </div><div>
                      发料进度：{tableData[11]?.distributeMaterialProcess}
                      
                    </div><div>
                      物料状态：{tableData[11]?.materialStatus == 0 ? '正常' : tableData[11]?.materialStatus == 1?'欠料':'' }
                      
                    </div><div>
                      机型：{tableData[11]?.model}
                      
                    </div><div>
                      工序编码：{tableData[11]?.procedureCode}
                    </div>
                  </div>:<div className={styles.chart} dg-chart-widget=""></div>}
                </div>
              </div>
              <div className={`${styles.layout} ${styles.layout_right_bottom13}`}>
                <div className={styles.panel}>
                  <div className={styles.title}><label>{tableData[12]?.seat}</label></div>
                  {!!tableData[12] ?   <div className={styles.chart} dg-chart-widget="">
                    <div>批号：{tableData[12]?.batchNo}
                     </div>
                    <div>装配班组：{tableData[12]?.groupCode}
                      </div>
                    <div>领料进度：{tableData[12]?.getMaterialProcess}
                     </div>
                    <div>收料进度：{tableData[12]?.receiveMaterialProcess}
                      </div>
                    <div>装配状态：{stateList.filter((item)=>item.value==tableData[12]?.isStates)[0]?.title}
                      </div>
                    <div>
                      工序名称：{tableData[12]?.procedureName}
                      
                    </div>
                    <div>
                      班组名称：{tableData[12]?.groupName}
                      
                    </div><div>
                      班组长：{tableData[12]?.groupLeader}
                      
                    </div><div>
                      发料进度：{tableData[12]?.distributeMaterialProcess}
                      
                    </div><div>
                      物料状态：{tableData[12]?.materialStatus == 0 ? '正常' : tableData[12]?.materialStatus == 1?'欠料':'' }
                      
                    </div><div>
                      机型：{tableData[12]?.model}
                      
                    </div><div>
                      工序编码：{tableData[12]?.procedureCode}
                    </div>
                  </div>:<div className={styles.chart} dg-chart-widget=""></div>}
                </div>
              </div>
              <div className={`${styles.layout} ${styles.layout_right_bottom14}`}>
                <div className={styles.panel}>
                  <div className={styles.title}><label>{tableData[13]?.seat}</label></div>
              {!!tableData[13] ?   <div className={styles.chart} dg-chart-widget="">
                    <div>批号：{tableData[13]?.batchNo}
                     </div>
                    <div>装配班组：{tableData[13]?.groupCode}
                      </div>
                    <div>领料进度：{tableData[13]?.getMaterialProcess}
                     </div>
                    <div>收料进度：{tableData[13]?.receiveMaterialProcess}
                      </div>
                    <div>装配状态：{stateList.filter((item)=>item.value==tableData[13]?.isStates)[0]?.title}
                      </div>
                    <div>
                      工序名称：{tableData[13]?.procedureName}
                      
                    </div>
                    <div>
                      班组名称：{tableData[13]?.groupName}
                      
                    </div><div>
                      班组长：{tableData[13]?.groupLeader}
                      
                    </div><div>
                      发料进度：{tableData[13]?.distributeMaterialProcess}
                      
                    </div><div>
                      物料状态：{tableData[13]?.materialStatus == 0 ? '正常' : tableData[13]?.materialStatus == 1?'欠料':'' }
                      
                    </div><div>
                      机型：{tableData[13]?.model}
                      
                    </div><div>
                      工序编码：{tableData[13]?.procedureCode}
                    </div>
                  </div>:<div className={styles.chart} dg-chart-widget=""></div>}
                </div>
              </div>
            </div>
          </div>
        </div>











      </div>
      </>
    );
  }
}
export default KanBan;
